<!--
 * @Author: wang
 * @Date: 2020-09-22 18:05:20
 * @LastEditTime: 2020-08-13 09:16:04
 * @LastEditors: wang
 * @Description: 应急调度 专家库列表
 * @FilePath: \c-u-f\src\App.vue
-->
<template>
  <div :class="themeClass" style="height:100%;">
    <div style="width:100%;height:100%;">
      <div class="exper_database_Content" v-if="shownoticelist">
        <div class="headcontent">
          <div class="select_bj">
            <select class="expert_type" v-model="dutiesId" @change="getexpertgroupgist">
              <option value="">全部</option>
              <option v-for="(item, index) in selectlist" :key="index" :value="item.id">{{ item.dutiesName }}</option>
              <!-- <option>防汛专家</option> -->
            </select>
          </div>
          <div class="search_box">
            <img src="@/assets/images/b_search_btn2.png" class="search_icon" v-if="theme == 'dark'" />
            <img src="@/assets/images/b_search_btn2.png" class="search_icon" v-else />
            <!-- <img src="../../assets/images/search_btn2.png" class="search_icon" /> -->
            <input type="text" placeholder="请输入名称" class="search" @keyup.enter.prevent="searchEnterFun($event)" v-model="name" />
            <!-- <a-input prefix="￥" suffix="RMB" /> -->
          </div>
          <div class="inform_btn" @click="inform">通知</div>
          <div class="inform_btn_list" @click="checknoticelist">通知列表</div>
        </div>
        <div class="table_content">
          <table>
            <thead>
              <th class="checkbox"></th>
              <th>姓名</th>
              <th>职称</th>
              <th>从事行业及特长</th>
              <th>工作单位</th>
              <th>联系电话</th>
            </thead>
            <tbody>
              <tr v-for="(item, index) in list" :key="index" :class="[item.state == 1 ? 'bg' : '']">
                <td class="checkbox">
                  <input type="checkbox" :checked="item.state == 1 ? true : false" />
                  <label class="chckbx" @click="check(item, $event)"></label>
                </td>
                <td>{{ item.name }}</td>
                <td>{{ item.dutiesName }}</td>
                <td>{{ item.industryName }}</td>
                <td>{{ item.company }}</td>
                <td>{{ item.phone }}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <noticelist v-else @closenoticelist="closenoticelist"></noticelist>
    </div>
  </div>
</template>

<script>
import noticelist from '@/components/exper_database/notice_list'
import { getExpertGroupList, getDutiesList, expertaddNotice } from '@/api/index'
import { mapState } from 'vuex'
export default {
  components: { noticelist },
  data () {
    return {
      shownoticelist: true,
      list: [],
      dutiesId: '',
      name: '',
      selectlist: [],
      id: ''
    }
  },
  mounted () {
    this.getdutieslist()
    this.getexpertgroupgist()
    this.id = localStorage.getItem('id')
  },
  computed: {
    ...mapState(['theme']),
    themeClass () {
      return `theme-${this.theme}`
    }
  },
  methods: {
    check (obj, event) {
      obj.state = obj.state === 0 ? 1 : 0
    },
    inform () {
      this.id = localStorage.getItem('id')
      console.log(this.id)
      const ids = []
      this.list.forEach(item => {
        if (item.state === 1) {
          ids.push(item.id)
        }
      })
      if (this.id) {
        if (ids.length === 0) {
          this.$Message.success('请选择要通知的专家')
          return
        }
        const params = {
          affectedPointId: this.id,
          noticeList: ids
        }
        expertaddNotice(params).then(res => {
          if (res.code === 200) {
            this.$Message.success('已通知专家')
          } else {
            this.$Message.success(res.message)
          }
        })
      } else {
        this.$Message.success('请选择受灾点')
      }
    },
    checknoticelist () {
      this.id = localStorage.getItem('id')
      if (this.id) {
        this.shownoticelist = false
      } else {
        this.$Message.success('请选择受灾点')
      }
    },
    closenoticelist (obj) {
      this.shownoticelist = true
    },
    searchEnterFun (e) {
      const keyCode = window.event ? e.keyCode : e.which
      if (keyCode === 13) {
        this.getexpertgroupgist()
      }
    },
    getexpertgroupgist () {
      const params = {}
      if (this.dutiesId) {
        params.dutiesId = this.dutiesId
      }
      if (this.name) {
        params.name = this.name
      }
      getExpertGroupList(params).then(res => {
        console.log(res)
        if (res.code === 200) {
          res.result.groupList.forEach(item => {
            item.state = 0
          })
          this.list = res.result.groupList
        }
      })
    },
    getdutieslist () {
      getDutiesList().then(res => {
        if (res.code === 200) {
          this.selectlist = res.result
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/index.scss';
.exper_database_Content {
  width: 520px;
  height: 100%;
  box-sizing: border-box;
  padding-top: 11px;
  padding-left: 10px;
  margin-left:auto;
  padding-right: 5px;
  @include themify($themes) {
    background: themed('exper_database_Content');
    color: themed('search_font');
  }
}
.theme-light .exper_database_Content {
  border: none;
}
.theme-dark .exper_database_Content {
  border: 1px solid #85cdff;
}
.headcontent {
  width: 100%;
  height: 30px;
  display: flex;
}
.select_bj {
  width: 112px;
  height: 41px;
  background-size: cover;
  @include themify($themes) {
    background: themed('select_bj');
  }
}
.expert_type {
  width: 100px;
  height: 30px;
  outline: none;
  font-size: 12px;
  line-height: 24px;
  margin-left: 6px;
  border: none;
  background: none;
  appearance: none;
  margin-top: 2px;
  box-sizing: border-box;
  padding-left: 3px;
  font-family: PingFang SC;
  font-weight: 600;
  @include themify($themes) {
    color: themed('search_font2');
  }
}
select option {
  color: black;
}
.search_box {
  width: 190px;
  height: 30px;
  margin-left: 20px;
  position: relative;
  @include themify($themes) {
    background: themed('search_box_bj');
  }
}
.search_icon {
  position: absolute;
  top: 9px;
  left: 6px;
}
.search {
  width: 100%;
  height: 30px;
  outline: none;
  font-size: 12px;
  line-height: 24px;
  background: none;
  border: none;
  margin-left: 20px;
  @include themify($themes) {
    color: themed('search_font1');
  }
}
.inform_btn {
  margin-left: 10px;
  width: 101px;
  height: 33px;
  background-size: 100% 46px;
  font-size: 14px;
  // color: #72e6ff;
  line-height: 38px;
  text-align: center;
  letter-spacing: 2px;
  margin-top: -2px;

  font-family: PingFang SC;
  font-weight: 400;
  @include themify($themes) {
    background: themed('inform_btn');
    color: themed('btn_color');
  }
}
.table_content {
  width: 100%;
  margin-top: 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}
table td,
table th {
  display: inline-block;
  flex: 1;
  // white-space: nowrap;
}

.table_content thead {
  opacity: 0.5;
  display: flex;
  width: 98%;
}
.table_content tbody {
  display: inline-block;
  width: 100%;
  overflow: auto;
  height: calc(100vh - 126px);
}
// 滚动条整体部分
.table_content tbody::-webkit-scrollbar {
  width: 4px;
}
//滚动条里面的滑块
.table_content tbody::-webkit-scrollbar-thumb {
  height: 20px;
  @include themify($themes) {
    background: themed('t-gdt-hk-bj');
  }
}
//滚动条的轨道
.table_content tbody::-webkit-scrollbar-track {
  @include themify($themes) {
    background: themed('t-gdt-gd-bj');
  }
}
.bg td {
  @include themify($themes) {
    background: themed('bg');
  }
}
.table_content .checkbox {
  width: 20px;
  border: none;
  background: none !important;
  margin-right: 5px;
  text-align: left;
  flex: none;
}
.checkbox .chckbx {
  height: 14px;
  width: 14px;
  border-radius: 2px;
  display: inline-block;
  vertical-align: middle;
}
.theme-light .checkbox .chckbx {
  border: 1px solid #027aff;
}
.theme-dark .checkbox .chckbx {
  border: 1px solid #71e6ff;
}

.checkbox input[type='checkbox']:checked + .chckbx {
  background-size: contain;
  border: none;
  @include themify($themes) {
    background-image: themed('checked2');
  }
}

.checkbox input[type='checkbox'] {
  vertical-align: middle;
  width: 15px;
  height: 15px;
  display: none;
}
.table_content th {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  @include themify($themes) {
    color: themed('table_color_h');
  }
  line-height: 24px;
  border-bottom: 1px solid #ffffff;
}
.table_content tr {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  @include themify($themes) {
    color: themed('table_color_h');
  }
  line-height: 30px;
  display: flex;
  width: 100%;
}
.table_content tr td {
  text-align: center;
}
.inform_btn_list {
  width: 70px;
  height: 30px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 27px;
  text-align: center;
  margin-left: 10px;
  cursor: pointer;
  @include themify($themes) {
    background: themed('inform_btn_list');
    color: themed('inform_btn_list_font');
  }
}
</style>
